<template>
  <div class="myCategory center">
    <!-- 顶部通栏 -->
    <div class="image">
      <img src="@/assets/images/logo.png" alt="" />
    </div>
    <ul class="category">
      <li>
        <router-link
          to="/"
          :class="{ name: true, active: $route.path == '/' }"
          @click="activeHandle('all')"
          >首页</router-link
        >
      </li>
      <li
        v-for="(item, index) in category"
        :key="item.id"
        @mouseenter="mouseenterHandle(index)"
        @mouseleave="currentIndex = -1"
      >
        <router-link
          :to="'/category/' + item.id"
          :class="{ name: true, active: $route.params.id == item.id }"
          @click="activeHandle(item.name)"
          >{{ item.name }}</router-link
        >
        <div :class="{ layer: true, open: currentIndex == index }">
          <ul>
            <li v-for="items in item.children" :key="items.id">
              <router-link :to="'/category/sub/' + items.id"></router-link>
              <img src="" v-lazyload="items.picture" alt="" />
              <p>{{ items.name }}</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div class="search">
      <p class="p">
        <i class="iconfont icon-sousuo"></i>
        <input
          type="text"
          v-model="searchVal"
          name=""
          id=""
          placeholder="搜一搜"
        />
      </p>
      <i
        class="iconfont icon-gouwuchekong cart"
        style="font-size: 26px"
        @click.self="$router.push('/cart')"
      >
        <div class="layers" v-if="flag">
          <div class="list">
            <div class="item" v-for="item in shopList" :key="item.skuId">
              <img
                :src="item.picture"
                alt=""
                @click="$router.push('/product/' + item.id)"
              />
              <div class="text_tontent">
                <p class="name">{{ item.name }}</p>
                <p class="specificationDescription">{{ item.specsText }}</p>
              </div>
              <div class="price">
                <p class="item_price">￥{{ item.price }}</p>
                <p class="item_num">x{{ item.count }}</p>
              </div>
              <i class="iconfont icon-guanbi2 close"></i>
            </div>
          </div>
          <div class="footer">
            <div class="total">
              <div>共{{ shopNum }}件商品</div>
              <div>￥{{ shopAllPrice }}</div>
            </div>
            <button @click.stop="$router.push('/cart')">去购车结算</button>
          </div>
        </div>
      </i>
      <span class="num">{{ shopNum }}</span>
    </div>
  </div>
</template>
<script>
import { getCateGory } from "@/api/home/cate";
import { ref, reactive, toRefs, computed, onBeforeUnmount, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    category: {
      type: Array,
      default: [],
    },
    currentName: {
      type: String,
      default: "",
    },
  },
  name: "myCategory",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      searchVal: "",
      currentIndex: -1,
      currentName: "",
      mouseenterHandle: (index) => {
        data.currentIndex = index;
      },
      activeHandle: (name) => {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
        ctx.emit("currentNameChange", name);
      },
    });
    const goods = reactive({
      flag: true,
      shopList: computed(() => {
        return store.state.cart.list;
      }),
      shopNum: computed(() => {
        let num = 0;
        store.state.cart.list.forEach((item) => {
          num += item.count;
        });
        return num;
      }),
      shopAllPrice: computed(() => {
        let num = 0;
        store.state.cart.list.forEach((item) => {
          num += item.count * item.price;
        });
        return num;
      }),
    });

    watch(
      () => route.path,
      (n, o) => {
        if (n === "/cart") {
          goods.flag = false;
        }
      },
      { immediate: true, deep: true }
    );
    return {
      ...toRefs(data),
      ...toRefs(goods),
    };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myCategory {
  width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 20px 0;
  .cart {
    position: relative;
    text-decoration: none;

    &:hover > .layers {
      height: 400px;
      opacity: 1;
      z-index: 2 !important;
    }
    .layers {
      z-index: -1;
      opacity: 0;
      transition: all 0.4s 0.2s;
      position: absolute;
      width: 400px;
      height: 0;
      overflow: hidden;
      left: -360px;
      top: 50px;
      box-shadow: 0 0 10px rgb(0 0 0 / 20%);
      background: #fff;
      border-radius: 4px;
      padding-top: 10px;
      .list {
        height: 310px;
        overflow: auto;
        padding: 0 10px;
        &::-webkit-scrollbar {
          width: 10px;
          height: 10px;
        }
        &::-webkit-scrollbar-thumb {
          background: #eee;
          border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
          background: #f8f8f8;
          border-radius: 2px;
        }
        .item {
          border-bottom: 1px solid #f5f5f5;
          padding: 10px 0;
          position: relative;
          display: flex;
          align-items: center;
          &:hover .close {
            opacity: 1;
          }
          .close {
            flex: 1;
            text-align: right;
            transition: all 0.4s;
            opacity: 0;
          }
          img {
            width: 80px;
            height: 80px;
          }
          .text_tontent {
            width: 45%;
            margin: 0 10px;
            .specificationDescription {
              display: -webkit-box;
              overflow: hidden;
              white-space: normal !important;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            p {
              font-size: 16px;
              &:nth-child(2) {
                margin-top: 10px;
                font-size: 14px;
                color: #999;
              }
            }
          }
          .price {
            flex: 1;
            text-align: center;
            .item_price {
              color: var(--price);
              font-size: 16px;
              margin-bottom: 10px;
            }
            .item_num {
              font-size: 14px;
              color: #999;
            }
          }
        }
      }
      .footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 70px;
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        background: #f8f8f8;
        align-items: center;
        .total {
          color: #999;
          font-size: 14px;
          div:nth-child(1) {
            padding-left: 4px;
          }
          div:nth-child(2) {
            font-size: 18px;
            color: var(--price);
          }
        }
        button {
          outline: none;
          border: 1px solid #27ba9b;
          color: #27ba9b;
          background: #e6faf6;
          border-radius: 5px;

          width: 180px;
          height: 50px;
          font-size: 16px;
        }
      }
      &::before {
        z-index: 99;
        content: "";
        position: absolute;
        right: 14px;
        top: -10px;
        width: 20px;
        height: 20px;
        background: #fff;
        transform: scaleX(0.6) rotate(45deg);
        box-shadow: -3px -3px 5px rgb(0 0 0 / 10%);
      }
    }
  }
  .image {
    width: 200px;
  }
  .category {
    width: 820px;
    display: flex;
    justify-content: space-around;
    padding-left: 40px;
    position: relative;
    z-index: 999;
    li {
      .name {
        cursor: pointer;
        color: #000;
        &:hover {
          color: var(--color);
        }
        &.active {
          color: var(--color);
        }
      }
      .layer {
        width: 1240px;
        background-color: #fff;
        position: absolute;
        left: -200px;
        top: 50px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        box-shadow: 0 0 5px #ccc;
        transition: all 0.2s 0.1s;
        ul {
          display: flex;
          height: 100%;
          align-items: center;
          li {
            padding: 20px;
            text-align: center;
            font-size: 0;
            position: relative;
            a {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
            &:hover {
              color: var(--color);
              cursor: pointer;
            }
            p {
              font-size: 14px !important;
            }
            img {
              width: 100px;
            }
          }
        }
      }
      .open {
        height: 160px;
        opacity: 1;
      }
    }
  }
  .search {
    display: flex;
    flex: 1;
    align-items: center;
    position: relative;
    justify-content: space-between;
    font-size: 20px;
    .p {
      border-bottom: 1px solid #000;
      input {
        border: none;
        outline: none;
      }
    }
    .num {
      position: absolute;
      right: -13px;
      top: -9px;
      font-size: 12px;
      background-color: #f00;
      padding: 2px 5px;
      border-radius: 15px;
      color: #fff;
    }
  }
}
</style>